<!--

openOptionmenu: false
 <option-menu
      :show="openOptionmenu"
      :title="'编辑商品'"
      :buttons="['出单','退款','✖']"
      :animation="'flipInX'"
      @func="getMsgFormSon"
    />
 -->



<template>
  <div>
    <van-overlay :show="show" @click="clickItem(type,'关闭')">
      <div class="w100 h100 f j-c a-c">
        <div @click.stop class="buttons">
          <p v-show="title" class="center pb20 mb20 cfff">{{title}}</p>
          <div
            @click="clickItem(type,item)"
            :class="'w100 mt20 center animated delay-'+index+'s '+animation"
            v-for="(item,index) in buttons"
            :key="index"
          >{{item}}</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: null
    },
    buttons: {
      type: Array,
      default: () => ["确定", "取消"]
    },
    animation: {
      type: String,
      default: null
    }
  },
  created() {},
  methods: {
    clickItem(type, item) {
      const obj = {
        type: type,
        item: item
      };
      this.$emit("func", obj);
    }
  }
};
</script>
<style scoped>
.buttons > div {
  color: #fff;
  width: 150px;
  line-height: 63px;
  height: 63px;
  margin: 20px auto;
}
.buttons > div:nth-child(2) {
  background: url(../../../static/img/optionmenu/but1.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(3) {
  background: url(../../../static/img/optionmenu/but2.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(4) {
  background: url(../../../static/img/optionmenu/but5.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(5) {
  background: url(../../../static/img/optionmenu/but4.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(6) {
  background: url(../../../static/img/optionmenu/but3.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(7) {
  background: url(../../../static/img/optionmenu/but6.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(8) {
  background: url(../../../static/img/optionmenu/but7.png) no-repeat;
  background-size: 100% 100%;
}
.buttons > div:nth-child(9) {
  background: url(../../../static/img/optionmenu/but8.png) no-repeat;
  background-size: 100% 100%;
}
</style>
